﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<!--link media="screen" type="text/css" href="css/main.css" rel="stylesheet"-->
		<title>jsForms - Documentation</title>		
	</head>
<body>
<a href="doc_eng.html">ENG</a><br/>
Как и в WinForms, в jsForms все строится на компонентах. Итак приступим.
<habracut text="далее" />
<h1>Компонент</h1>Компонент состоит из двух частей:
 <ul>
 <li>Визуальной</li>
 <li>Функциональной</li>
 </ul>
<h3>Визуальная часть</h3>
Визуальной частью является шаблон, который содержит в себе HTML разметку, устанавливает свойства и события.<br/>
Шаблон это js файл имеющий следующий вид:<br/>
<code>
jsForms.Templates.ComponentType='HTML';
</code>
<ul><li>ComponentType -  тип компонента</li>
<li>[HTML] - HTML код заключеный в ковычки</li></ul>
<b>Важно</b>- в HTML коде используйте символы "<" и ">" для обрамления тегов, в других местах используйте "& lt;" и "& gt;" соответственно.
HTML тег должен быть очень строгим, то есть все открытые теги должны быть закрыты и соблюден порядок следования.
Шаблон должен иметь только один root html тег.<br/>
<h3>Функциональная часть</h3>
Функциональная часть это тоже js файл, в котором содержится "класс", а так же декларирование свойств и событий компонента.
Функциональная часть имеет вид:<br/>
<code>
jsForms.Components.ComponentType=<br/>
{<br/>[JavaScript]<br/>};<br/>
</code>
<ul><li>ComponentType -  тип компонента</li>
<li>[JavaScript] - в общем классический JS </li></ul>
<h1>Использование jsForms</h1>
Разберем все на примерах.<br/>
Например Template файл для кнопки будет иметь вид:<br/>
<blockquote><code><font size="2" face="Courier New" color="black">jsForms.Templates.Button='<font color="#0000ff">&#60;</font><font color="#800000">div</font> <font color="#ff0000">class</font><font color="#0000ff">="button"</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">div</font> <font color="#ff0000">class</font><font color="#0000ff">="button-background"</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">div</font> <font color="#ff0000">class</font><font color="#0000ff">="button-common button-w"</font><font color="#0000ff">/&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">div</font> <font color="#ff0000">class</font><font color="#0000ff">="button-common button-e"</font><font color="#0000ff">/&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">span</font> <font color="#ff0000">name</font><font color="#0000ff">="text"</font> <font color="#ff0000">class</font><font color="#0000ff">="button-text"</font><font color="#0000ff">/&#62;</font>'+<br>'<font color="#0000ff">&#60;/</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>';</font><br><br><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font></code></blockquote>
<h4>Component</h4>
Для использования в шаблоне других компонентов используйте тег: component<br/>
При этом компонент, шаблон которого содержит другие компоненты, будем называть контейнером.<br/>
Тег component иммеет вид
<blockquote><code><font size="2" face="Courier New" color="black"><font color="#0000ff">&#60;</font><font color="#800000">component</font> [<font color="#ff0000">name</font><font color="#0000ff">='ComponenName'</font>][<font color="#ff0000">id</font><font color="#0000ff">='IdValue'</font>][<font color="#ff0000">class</font><font color="#0000ff">='CSSClass'</font>]<font color="#0000ff">&#62;</font>[Settings]<font color="#0000ff">&#60;/</font><font color="#800000">component</font><font color="#0000ff">&#62;</font></font><br><br><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font></code></blockquote>
<ul><li>ComponentType - тип компонента</li>
<li>ComponenName - название компонента, необязательный параметр, будет описан ниже</li>
<li>id - устанаваливает как и для html тега, свойство id</li>
<li>class - устанаваливает как и для html тега, свойство class</li>
<li>Setting - набор тегов, о которых будет рассказано позже</li>
</ul>
Разберем на примере диалогового окна, которое содержит какой-то текст и две кнопки.<br/>
<blockquote><code><font size="2" face="Courier New" color="black">jsForms.Templates.InsertCSSDialog='<font color="#0000ff">&#60;</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>Test text<font color="#0000ff">&#60;/</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">component</font> <font color="#ff0000">type</font><font color="#0000ff">="Button"</font><font color="#0000ff">/&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">component</font> <font color="#ff0000">type</font><font color="#0000ff">="Button"</font><font color="#0000ff">/&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">component</font><font color="#0000ff">&#62;</font>'+<br>'<font color="#0000ff">&#60;/</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>';</font><br><br><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font></code></blockquote>
Но возникает вопрос как установить названия кнопкам?<br/>
Для установки свойств копонента служит тег properties.<br/>
<h4>Properties</h4>
Тег properties содержит все заданные свойства компонента, перечисление идет с помощью тега key<br/>
Тег key иммеет вид
<blockquote><code><font size="2" face="Courier New" color="black"><font color="#0000ff">&#60;</font><font color="#800000">key</font> <font color="#ff0000">name</font><font color="#0000ff">="PropertyName"</font> [<font color="#ff0000">value</font><font color="#0000ff">="PropertyValue"</font>][<font color="#ff0000">type</font><font color="#0000ff">="object|string|int|float..."</font>][<font color="#ff0000">disable</font>][<font color="#ff0000">direct</font>][<font color="#ff0000">const</font>]<font color="#0000ff">&#62;</font>[PropertyValue]<font color="#0000ff">&#60;/</font><font color="#800000">key</font><font color="#0000ff">&#62;</font><br></font><br><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font></code></blockquote>
<ul>
<li>PropertyName - название свойства, обязательный параметр</li>
<li>PropertyValue - значение, должно быть указано либо в атрибуте value, либо внутри тега key, приоритетным является атрибут</li>
<li>type - тип значения, не обязательный параметр</li>
<li>disable - атрибут указывает что свойство не будет задано</li>
<li>direct - атрибут указывает на то, что свойство устанавливается в обход set-теру свойства, сейчас игнорируется</li>
<li>const - атрибут зарезервирован для будущей поддержки мультиязычности.</li>
</ul>

Таким образом мы можем задать "Text" нашим кнопкам<br/>
<blockquote><code><font size="2" face="Courier New" color="black">jsForms.Templates.InsertCSSDialog='<font color="#0000ff">&#60;</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>Test text<font color="#0000ff">&#60;/</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">component</font> <font color="#ff0000">type</font><font color="#0000ff">="Button"</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">properties</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">key</font> <font color="#ff0000">name</font><font color="#0000ff">="Text"</font> <font color="#ff0000">value</font><font color="#0000ff">="Ok"</font><font color="#0000ff">/&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">properties</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">component</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">component</font> <font color="#ff0000">type</font><font color="#0000ff">="Button"</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">properties</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">key</font> <font color="#ff0000">name</font><font color="#0000ff">="Text"</font> <font color="#ff0000">value</font><font color="#0000ff">="Cancel"</font><font color="#0000ff">/&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">properties</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">component</font><font color="#0000ff">&#62;</font>'+<br>'<font color="#0000ff">&#60;/</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>';</font><br><br><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font></code></blockquote>
Теперь прибиндим события к кнопкам, для этого воспользуемся тегом events<br/>
<h4>Events</h4>
Тег events содержит все заданные события компонента, перечисление идет с помощью тега key
<blockquote><code><font size="2" face="Courier New" color="black"><font color="#0000ff">&#60;</font><font color="#800000">key</font> <font color="#ff0000">name</font><font color="#0000ff">="EventName"</font> <font color="#ff0000">value</font><font color="#0000ff">="EventCallback"</font><font color="#0000ff">/&#62;</font></font><br><br><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font></code></blockquote>
<ul>
<li>EventName - название события, обязательный параметр</li>
<li>EventCallback - название метода из компонента "класса" контейнера.</li>
</ul>

Внесем изменения в функциональную часть нашего компонента, добавив туда два метода: bOk_Click,bCancel_Click<br/>
<blockquote><code><font size="2" face="Courier New" color="black">jsForms.Components.InsertCSSDialog=<br>{<br><font color="#008000">//</font><br><font color="#008000">// другой код</font><br><font color="#008000">//</font><br>&nbsp;&nbsp;&nbsp;&nbsp;bOk_Click:<font color="#0000ff">function</font>()<br>&nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(<font color="#A31515">'OK'</font>);<br>&nbsp;&nbsp;&nbsp;&nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;bCancel_Click:<font color="#0000ff">function</font>()<br>&nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(<font color="#A31515">'Cancel'</font>);<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br><font color="#008000">//</font><br><font color="#008000">// другой код</font><br><font color="#008000">//</font><br>};</font><br><br><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font></code></blockquote>
И изменим наш шаблон<br/>
<blockquote><code><font size="2" face="Courier New" color="black">jsForms.Templates.InsertCSSDialog='<font color="#0000ff">&#60;</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>Test text<font color="#0000ff">&#60;/</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">component</font> <font color="#ff0000">type</font><font color="#0000ff">="Button"</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">properties</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">key</font> <font color="#ff0000">name</font><font color="#0000ff">="Text"</font> <font color="#ff0000">value</font><font color="#0000ff">="Ok"</font><font color="#0000ff">/&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">properties</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">events</font><font color="#0000ff">&#62;&#60;</font><font color="#800000">key</font> <font color="#ff0000">name</font><font color="#0000ff">="onClick"</font> <font color="#ff0000">value</font><font color="#0000ff">="bOk_Click"</font><font color="#0000ff">/&#62;&#60;/</font><font color="#800000">events</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">component</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">component</font> <font color="#ff0000">type</font><font color="#0000ff">="Button"</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">properties</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">key</font> <font color="#ff0000">name</font><font color="#0000ff">="Text"</font> <font color="#ff0000">value</font><font color="#0000ff">="Cancel"</font><font color="#0000ff">/&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">properties</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">events</font><font color="#0000ff">&#62;&#60;</font><font color="#800000">key</font> <font color="#ff0000">name</font><font color="#0000ff">="onClick"</font> <font color="#ff0000">value</font><font color="#0000ff">="bCancel_Click"</font><font color="#0000ff">/&#62;&#60;/</font><font color="#800000">events</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">component</font><font color="#0000ff">&#62;</font>'+<br>'<font color="#0000ff">&#60;/</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>';</font><br><br><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font></code></blockquote>

Шаблоны обладают еще одним важным свойством для нас, они позволяют давать каждому html тегу и компоненту имена,
которые будут доступны в "классе". Для того, чтобы задать имя нужно установить атрибут name; для всех компонентов, у которых
не выставлен данный атрибут, автоматически при компиляции генерируется название вида "_CX", где X какое-то число,
 зачем это нужно будет понятно позже. Как использовать имена в коде компонента будет описано ниже.<br/>

Шаблон позволяет делать вложения одних компонентов в дургие. Например, давайте создадим компонент MultiPanel.<br/>
Шаблон:<br/>
<blockquote><code><font size="2" face="Courier New" color="black">jsForms.Templates.MultiPanel='<font color="#0000ff">&#60;</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">div</font> <font color="#ff0000">class</font><font color="#0000ff">="MPanelTop"</font> <font color="#ff0000">name</font><font color="#0000ff">="top"</font><font color="#0000ff">/&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">div</font> <font color="#ff0000">class</font><font color="#0000ff">="MPanelCenter"</font> <font color="#ff0000">name</font><font color="#0000ff">="content"</font><font color="#0000ff">/&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">div</font> <font color="#ff0000">class</font><font color="#0000ff">="MPanelBottom"</font> <font color="#ff0000">name</font><font color="#0000ff">="bottom"</font><font color="#0000ff">/&#62;</font>'+<br>'<font color="#0000ff">&#60;/</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>';</font><br><br><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font></code></blockquote>
"Класс":<br/>
<code>
jsForms.Components.MultiPanel={};
</code><br/>
<h4>Content</h4>
Теперь изменим наше диалоговое окно - поместим клавиши в нижнюю часть панели, текст в верхнюю, добавим также инпут в центральную.<br/>
<blockquote><code><font size="2" face="Courier New" color="black">jsForms.Templates.InsertCSSDialog='<font color="#0000ff">&#60;</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">component</font> <font color="#ff0000">type</font><font color="#0000ff">="MultiPanel"</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">content</font> <font color="#ff0000">into</font><font color="#0000ff">="top"</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>Please enter css class name<font color="#0000ff">&#60;/</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">content</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">content</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">input</font> <font color="#ff0000">name</font><font color="#0000ff">="iStyleClassName"</font><font color="#0000ff">/&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">content</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">content</font> <font color="#ff0000">into</font><font color="#0000ff">="bottom"</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">component</font> <font color="#ff0000">type</font><font color="#0000ff">="Button"</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">properties</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">key</font> <font color="#ff0000">name</font><font color="#0000ff">="Text"</font> <font color="#ff0000">value</font><font color="#0000ff">="Ok"</font><font color="#0000ff">/&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">properties</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">component</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">component</font> <font color="#ff0000">type</font><font color="#0000ff">="Button"</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">properties</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">key</font> <font color="#ff0000">name</font><font color="#0000ff">="Text"</font> <font color="#ff0000">value</font><font color="#0000ff">="Cancel"</font><font color="#0000ff">/&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">properties</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">component</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">content</font><font color="#0000ff">&#62;</font>'+<br>'<font color="#0000ff">&#60;/</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>';</font><br><br><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font></code></blockquote>
как видно из примера с помощью тега content мы можем разместить один компонент внутри другого.<br/>
Тег content иммеет вид
<blockquote><code><font size="2" face="Courier New" color="black"><font color="#0000ff">&#60;</font><font color="#800000">content</font> [<font color="#ff0000">into</font><font color="#0000ff">="ComponentName"</font>]<font color="#0000ff">&#62;</font>[HTML|Component]<font color="#0000ff">&#60;/</font><font color="#800000">content</font><font color="#0000ff">&#62;</font></font><br><br><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font></code></blockquote>
<ul>
<li>into -  указывает в какой контрол будет добавлено содержимое, по умолчанию равно "content"</li>
<li>[HTML|Component] - любой html код + компоненты.</li>
</ul>

<h3>Компилирование</h3>
<img src="compilation.png"/><br>
Картинка из предыдущего поста, суть осталась таже, а вот сам механизм разбора изменился.
При первом запросе какого-либо компонента, движок проверит скомпилирован ли данный компонент, если нет - то произведет компиляцию. Для этого он распарсит шаблон и сделат на основе него js функцию.
При вызове функции будет создана DOM модель, обвернутая в jQuery, а так же к этому объекту будет прекреплена базовая функциональность и функциональность"класса" компонента .Базовой называется функциональность, заданная компонентом Component.А все теги, отмеченые атрибутом name, будут находиться в свойстве Components.<br/>
То есть если откомпилировать:<br/>
<blockquote><code><font size="2" face="Courier New" color="black">jsForms.Templates.InsertCSSDialog='<font color="#0000ff">&#60;</font><font color="#800000">div</font> <font color="#ff0000">id</font><font color="#0000ff">="test"</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">component</font> <font color="#ff0000">type</font><font color="#0000ff">="MultiPanel"</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">content</font> <font color="#ff0000">into</font><font color="#0000ff">="top"</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">div</font> <font color="#ff0000">name</font><font color="#0000ff">="SimpleText"</font><font color="#0000ff">&#62;</font>Please enter css class name<font color="#0000ff">&#60;/</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>Unnamed div<font color="#0000ff">&#60;/</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">content</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">content</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">input</font> <font color="#ff0000">name</font><font color="#0000ff">="iStyleClassName"</font><font color="#0000ff">/&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">content</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">content</font> <font color="#ff0000">into</font><font color="#0000ff">="bottom"</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">component</font> <font color="#ff0000">type</font><font color="#0000ff">="Button"</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">properties</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">key</font> <font color="#ff0000">name</font><font color="#0000ff">="Text"</font> <font color="#ff0000">value</font><font color="#0000ff">="Ok"</font><font color="#0000ff">/&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">properties</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">component</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">component</font> <font color="#ff0000">type</font><font color="#0000ff">="Button"</font> <font color="#ff0000">name</font><font color="#0000ff">="bCancel"</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">properties</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;</font><font color="#800000">key</font> <font color="#ff0000">name</font><font color="#0000ff">="Text"</font> <font color="#ff0000">value</font><font color="#0000ff">="Cancel"</font><font color="#0000ff">/&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">properties</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">component</font><font color="#0000ff">&#62;</font>'+<br>&nbsp;&nbsp;&nbsp;&nbsp;'<font color="#0000ff">&#60;/</font><font color="#800000">content</font><font color="#0000ff">&#62;</font>'+<br>'<font color="#0000ff">&#60;/</font><font color="#800000">div</font><font color="#0000ff">&#62;</font>';</font><br><br><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font></code></blockquote>
На выходе мы получим объект содержащий:<br/>
<ul>
<li>Свойства
<ul><li>_Type - тип компонента</li>
<li>_Name - название тега установленное в атрибуте name или сгенерированное автоматически.</li>
<li>P или Properties - по умолчанию пустой объект, предназначенный для хранения свойств конкретного объекта</li>
<li>E или Events - по умолчанию пустой объект, предназначенный для хранения событий конкретного объекта</li>
<li>C или Components - объект содержащий все теги и компоненты, обвернутые в jQuery, отмеченные атрибутом name в нашем случае<br/>
C = {<ul>
<li>SimpleText</li>
<li>iStyleClassName</li>
<li>bCancel</li>
</ul>}</li></ul>
</li><li>Методы jQuery объекта<ul>
<li>append</li>
<li>appendTo</li>
<li>show</li>
<li>т.д</li>
</ul></li>
<li>Методы Component
<ul>
<li>Init - инициализация компонента, вызывается пользователем, после добавления компонента в DOM</li>
<li>_GetProperty(name) - получить свойство</li>
<li>_SetProperty(name, value) - установить свойство</li>
<li>_SetEvent(name,obj,func) - установить событие, нужно указать объект(obj) и содержащуюся в нем функцию(func)</li>
<li>_GetEvent(name) - получить структуру {obj,func}</li>
<li>_ExecEvent(name,arguments) - выполнить событие, аргумент должен быть один, но не обязателен.</li>
</ul></li><li>Методы самого компонента
<ul>
 <li>bOk_Click() - функция пользователя</li>
 <li>bCancel_Click() - функция пользователя</li>
 <li>т.д.</li>
</ul></li></ul>
Так же вы должны знать, что сам DOM объект компонента содержит ссылку на объект и хранит ее в свойстве _OBJ, т.е.
document.getElementById('test')._OBJ - будет равен конкретному объекту класса InsertCSSDialog.<br/>
Для более простой записи лучше использовать jsForms.GetObject(element), а для поиска вверх конкретного типа компонента
jsForms.GetObjectByType(element,foundType)
<h3>Реализация функциональной части</h3>
Теперь перейдем конкретно к написанию функциональной части.<br/>
Я рекомендую использовать подход "цепочек" который очень удачно реализован в jQuery, для этого в конце каждого метода возвращайте указатель на себя[return this; ].<br/>
Так же используйте конкретно отведенные места для данных, то есть this.P.&#60;PropertyName&#62; для хранения свойств.<br/>
Давайте своим методам и свойствам названия с большой буквы,- это убережет вас от перекрытия методов jQuery, но все же держите в памяти то обстоятельство, что базовым объектом является jQuery и его плагины, иногда названия методов в плагинах начинаются с большой буквы, что может потрепать вам нервы)<br/>
При "перегрузке" метода Init, вставляйте в конце вызов базового класса [return jsForms.Components.Component.Init.call(this);], он необходим для инициализации вложеных компонентов.<br/>
Помните что в свойстве this.C у вас содежаться jQuery Обвертки над тегами и другие компоненты шаблона, манипулируйте ими.<br/>
Давайте добавим валидацию в наше диалоговое окно:<br/>
<blockquote><code><font size="2" face="Courier New" color="black">jsForms.Components.InsertCSSDialog=<br>{<font color="#008000">// другой код</font><br>&nbsp;&nbsp;&nbsp;&nbsp;bOk_Click:<font color="#0000ff">function</font>()<br>&nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">var</font> text = <font color="#0000ff">this</font>.C.iStyleClassName.val();<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">if</font> (text==undefined || $.trim(text)==<font color="#A31515">''</font>)<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(<font color="#A31515">'Please enter css class name'</font>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">return</font>;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(<font color="#A31515">'OK, class="'</font>+text+<font color="#A31515">'");<br>&nbsp;&nbsp;&nbsp;&nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;bCancel_Click:function()<br>&nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('</font>Cancel');<br>&nbsp;&nbsp;&nbsp;&nbsp;},<br><font color="#008000">// другой код</font><br>};</font><br><br><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font></code></blockquote>
Если мы хотим добавить к нашему компоненту свойство, событие или контейнер, нам нужно это продекларировать, для этого проще всего вызвать функцию jsForms.CreateCompileInfoByObject(objDeclaration), в качестве параметра принимающей специальным образом составленый объект.<br/>
<blockquote><code><font size="2" face="Courier New" color="black">objDeclaration={<br>{Name:&#60;ComponentType&#62;,<br>&nbsp;&nbsp;&nbsp;&nbsp;Properties:{<font color="#008000">// Property list</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#60;PropertyName1&#62;:{ Type:&#60;PropertyType&#62;&#60;,Values:{<font color="#0000ff">object</font>}&#62;, Access:&#60;PropertyAccess&#62;,Description:&#60;String&#62;},<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#60;PropertyName2&#62;:{ Type:&#60;PropertyType&#62;,Access:&#60;PropertyAccess&#62;},<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; e.t.c<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br>&nbsp;&nbsp;&nbsp;&nbsp; Events:{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#60;EventName1&#62;:{Description:&#60;String&#62;},<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#60;EventName2&#62;:{Description:&#60;String&#62;},<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#60;EventName3&#62;:{Description:&#60;String&#62;},<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; e.t.c},<br>&nbsp;&nbsp;&nbsp;&nbsp; Contents:<br>&nbsp;&nbsp;&nbsp;&nbsp; {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#60;ContentName1&#62;:{Description:&#60;String&#62;},<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#60;ContentName2&#62;:{Description:&#60;String&#62;},<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#60;ContentName3&#62;:{Description:&#60;String&#62;},<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; e.t.c}<br> }<br>};</font><br><br><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font></code></blockquote>
<ul>
<li>Description - описание, необязательно.</li>
<li>ContentName - название контейнера, в шаблоне должен быть тег с атрибутом name как у контейнера.</li>
<li>PropertyName - название свойства, регистр важен.</li>
<li>PropertyType - тип входных данных свойства, если выбран Object, то входное значение будет выполнено через eval(...) и передано в свойство</li>
<li>PropertyAccess - доступ, если доступ установлен в 'Direct', то запись будет произведена через метод _SetProperty в обход set-ра свойства, иначе будет вызван метод Set&#60;PropertyName&#62; и в него передано значение, метод сеттер нужно определить.</li></ul>
PropertyType in ('Boolean','String','Object','Int','Float','Values',&#60;undefined&#62;) &#60;undefined&#62; - is default<br/>
PropertyAccess in ('Direct','Set','Get','GetSet') 'GetSet' - is default<br/>
Давайте на примере клавиши рассмотрим как декларировать свойства и события.<br/>
<blockquote><code><font size="2" face="Courier New" color="black">jsForms.Components.Button = {<br>&nbsp;&nbsp;&nbsp;&nbsp;Init: <font color="#0000ff">function</font>()<br>&nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#008000">// В данном случае нет надобности </font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#008000">//вызывать базовый метод Init, так как нет ни одного контейнера и </font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#008000">//вложенного компонента</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">return</font> <font color="#0000ff">this</font>.SetEnabled(<font color="#0000ff">true</font>);<br>&nbsp;&nbsp;&nbsp;&nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;eventClick : <font color="#0000ff">function</font>(e)<br>&nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">if</font> (e.data) {<font color="#008000">//e.data содержит ссылку на объект</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">if</font> (e.data.P.Enabled) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.data._ExecEvent(<font color="#A31515">'onClick'</font>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;SetEnabled: <font color="#0000ff">function</font>(flag)<br>&nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">if</font> (<font color="#0000ff">this</font>.P.Enabled != flag) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">this</font>.P.Enabled = flag==<font color="#0000ff">true</font>;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">this</font>.attr(<font color="#A31515">'state'</font>, flag ? <font color="#A31515">'enabled'</font> : <font color="#A31515">'disabled'</font>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">if</font> (flag) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">this</font>.unbind(<font color="#A31515">'click'</font>).bind(<font color="#A31515">'click'</font>,<font color="#0000ff">this</font>,<font color="#0000ff">this</font>.eventClick );<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">else</font> {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">this</font>.unbind(<font color="#A31515">'click'</font>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">return</font> <font color="#0000ff">this</font>;<br>&nbsp;&nbsp;&nbsp;&nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;GetEnabled:<font color="#0000ff">function</font>()<br>&nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">return</font> <font color="#0000ff">this</font>.P.Enabled;<br>&nbsp;&nbsp;&nbsp;&nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;GetText: <font color="#0000ff">function</font>()<br>&nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">return</font> <font color="#0000ff">this</font>.P.text;<br>&nbsp;&nbsp;&nbsp;&nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;SetText: <font color="#0000ff">function</font>(newText)<br>&nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">if</font> (<font color="#0000ff">this</font>.P.text != newText) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">this</font>.P.text = newText;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">this</font>.C.text[0].innerHTML = newText;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">return</font> <font color="#0000ff">this</font>;<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>};<br><font color="#008000">// -----------------------------------------------</font><br><font color="#008000">// Compilation INFO</font><br><font color="#008000">// -----------------------------------------------</font><br>jsForms.CreateCompileInfoByObject(<br>{<br>&nbsp;&nbsp;&nbsp;&nbsp;Name: <font color="#A31515">'Button'</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;Properties: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Enabled: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Type: <font color="#A31515">'Boolean'</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Access: <font color="#A31515">'GETSET'</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text: {}<br>&nbsp;&nbsp;&nbsp;&nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;Events: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onClick: {}<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>});<br></font><br><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font></code></blockquote>

<h3>Вставка компонентов в страницу</h3>
Давайте теперь перейдем к рассмотрению самого процесса использования компонентов на странице.<br/>
Для создания компонента необходимо вызвать функцию jsForms.CreateComponent(compType)<br/>
<blockquote><code><font size="2" face="Courier New" color="black"><font color="#0000ff">var</font> button = jsForms.CreateComponent(<font color="#A31515">'Button'</font>);<br><font color="#008000">//Далее "лучше" скрыть компонент, чтобы не видеть как он перестраивается и добавить его в DOM&#60;br/&#62;</font><br>button.hide().appendTo(...);<br><font color="#008000">//После добавления в DOM нужно инициализировать его, методом Init() и показать&#60;br/&#62;</font><br>button.Init().show();<br><font color="#008000">//А так как мы используем цепочки, то можно все записать одной строкой.&#60;br/&#62;</font><br><font color="#0000ff">var</font> button = jsForms.CreateComponent(<font color="#A31515">'Button'</font>).hide().appendTo(...).Init().show();</font><br><br><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font></code></blockquote>

<h1>Производительность</h1>
Для замера производительности создавалось 2000 простых объектов, каждый тест повторялся 10 раз.<br/>
Тестовое окружение:
WinXP Sp2, FireFox 3.0.4 + FireBug, CPU Intel Pentium Dual E2160@1.80GHz, 2Gb Mem
<img src="score.png"/><br>
Как видно из графиков результаты плавают, предположительно это связано со сборщиком мусора, который изредка подтормаживает js.
Подробная статистика:
<ul>
<li>jQuery(Template)<br/>Rt:10 R:2000, T:1440 ms [min:1315, max:2333 ms] [min:0.6575 avr:0.7198, max:1.1665 ms] delta=1018</li>
<li>Manual DOM building<br/>Rt:10 R:2000, T:340 ms [min:330, max:375 ms] [min:0.1650 avr:0.1701, max:0.1875 ms] delta=45</li>
<li>jsForms<br/>Rt:10 R:2000, T:442 ms [min:434, max:457 ms] [min:0.2170 avr:0.2210, max:0.2285 ms] delta=23</li></ul>
Протестировать можно <a title="" TARGET='_blank' href="http://www.jsforms.com/test.html">тут</a>.
<h1>П.С.</h1>
На данный момет реализованы следующие компоненты:
<ul><li>Button - "толстая" клавиша.</li>
<li>ButtonDiv - див`ная клавиша, очень легкая.</li>
<li>ListBox</li>
<li>TreeView</li>
<li>TabControl</li>
<li>ProgressBar</li>
<li>мелочь</li></ul>
Живым примером работы данного подхода является сайт, <a title="Редактор" href="http://www.jsForms.com/jsForms_editor.html" TARGET='_blank'>редактор компонентов</a><br/>
Весь сайт и сама технология доступны под GPL3, скачать можно с <a title="сайт" href="http://www.jsForms.com" TARGET='_blank'>оф.сайта</a>.<br/>

Редактор находиться в разработке, так что буду рад предложениям и критике.<br/>
Технология испытана на: FF2+, IE7, Safari, Chrome<br/>
У кого есть под руками IE6 отпишитесь, заранее спасибо.<br/>

Так же спасибо <a href="http://habrahabr.ru" target="_blank">Habrahabr</a>, так как многие идеи были подчерпнуты иммено с его страниц.<br/>
Спасибо.

<font size="1">_________<br />Текст подготовлен в <a href="http://www.bankinform.ru/HabraEditor/">ХабраРедакторе</a></font>
 <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6331922-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>